/**
 * 第 5 讲
 * 
 * -----------------
 * 
 * input 中的方法:
 * onChange
 * onKeyUp
 * onKeyDown
 */

import React from 'react'


let RANDOM_COLOR = function() {
  const rand = Math.floor(Math.random( ) * 0xFFFFFF).toString(16);
  if (rand.length === 6) {
      return '#'+rand;
  } else {
      return RANDOM_COLOR();
  }
}

export default class Home5 extends React.Component {
  constructor() {
    super()

    this.state = {
      msg: '11',
      userName: '',
    }
  }

  run = (event) => {
    event = event || {} // 防止没有值
    // 会默认传event值(当点击那里没有传值时)
    console.log('event=>', event)
    console.log('--- event常用的属性 ---')
    const pageX = event.pageX || 0
    const pageY = event.pageY || 0
    console.log('pageX=', pageX, ' pageY=', pageY)
    const target = event.target
    console.log('target=>', target, ' type=', typeof target)

    console.log(target.par)
    console.log(target.toString())

    console.log('target.nodeType=', target.nodeType)
    if (target && typeof target === 'object' &&
        target.nodeType === 1 // 元素节点
    ) {

      // 那些处理方法 - 都是用于通用方法才会用，下面的是指定div，就不用
      let color = RANDOM_COLOR()
      console.log('color=>', color)
      target.style.backgroundColor = color
    }
  }

  runWX = () => {
    const target = document.getElementById('button')
    if (target && typeof target === 'object' &&
        target.nodeType === 1 // 元素节点
    ) {
      // 那些处理方法 - 都是用于通用方法才会用，下面的是指定div，就不用
      let color = RANDOM_COLOR()
      console.log('color=>', color)
      target.style.backgroundColor = color
    }
  }


  getUserName = () => {
    console.log('getUserName=>', this.state.userName)
  }

  render() {
    return (
      <div className='content'>
        <h2>事件对象</h2>
        <button onClick={this.run}>事件对象</button>
        <br /><br />
        <button id='button' onClick={this.runWX}>小程序没有事件对象</button>
        <br /><br />
        <h2>表单事件</h2>
        <input onChange= {(event) => {
          // 第1种
          const target = event.target || {}
          const value = target.value || ''
          // console.log('onChange - value=', value)
          this.setState({
            userName: value
          })

          // 第二种，就不用onChange ，添加 id 样式 用js获取input进行获取需要的值
          // 和 wx小程序的 代码类似，就不写了
        }}/>
        <button onClick={this.getUserName}>获取input的值</button>
        
      </div>
    )
  }
}